<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./lib/vant.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./lib/vue.js"></script>
    <script src="./lib/vant.js"></script>
    <!-- 引入axios（如果sendData是基于axios的） -->
    <script src="./lib/axios.js"></script>
    <style>
        body {
            background-color: #f8f8f8;
        }

        h3 {
            margin-left: 20px;
        }

        .btn {
            margin: 30px 16px;
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar title="登录"></van-nav-bar>
        <h3>请登录认证</h3>
        <van-cell-group inset>
            <van-form ref="formRef">
                <van-field v-model="loginData.username" required name="工号" label="工号" placeholder="请填写您的工号"
                    :rules="[{ required: true, message: '请填写工号' }]"></van-field>
                <van-field v-model="loginData.password" required type="password" name="密码" label="密码"
                    placeholder="请填写您的密码" :rules="[{ required: true, message: '请填写密码' }]"></van-field>
            </van-form>
        </van-cell-group>

        <div class="btn">
            <van-button round block type="info" @click="login">登录</van-button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //from实例
                formRef: null,
                loginData: {
                    username: '',
                    password: '',
                },
                guoTeacherRating: ''

            }
        },
        methods: {
            async login() {
                await this.$refs.formRef?.validate();
                let result = await axios({
                    method: 'POST',
                    url: '/login',
                    data: this.loginData,
                })
                if (result.code === 1) {
                    this.$notify({ type: 'success', message: '登陆成功' });
                    setTimeout(() => {
                        location.replace(result.data)
                    }, 500)
                } else {
                    this.$notify({ type: 'danger', message: '登陆失败', duration: 1000, });
                    this.loginData = {
                        username: '',
                        password: '',
                    }
                }
            }
        },

    })
</script>

</html>